<template>
    <div id="channel">
        <header>
            <div class="P_date">
                <span>时间：</span>
                <gDate @faithDate="faithDate"></gDate>
            </div>
            <div class="P_type">
                <div class="Choice">
                    <el-form ref="form" prop="">
                        <el-form-item label="小程序名称">
                            <el-select v-model="region" placeholder="请选择小程序名称" @change="handleChange">
                                <el-option label='' value=''>全部</el-option>
                                <el-option :label=item.appname :value=item.appid v-for="(item,index) in options" :key="index">{{item.appname}}</el-option>
                            </el-select>
                        </el-form-item>
                        <el-button @click="search">搜索</el-button>
                    </el-form>
                </div>
            </div>
            <el-button type="primary" class="addBtn" @click="addBtn">添加</el-button>
        </header>
        <main>
            <el-table :data="tableData" border style="width: 100%" stripe>
                <el-table-column prop="appname" label="小程序名称"></el-table-column>
                <el-table-column prop="channel_name" label="渠道名称"></el-table-column>
                <el-table-column prop="channel_url" label="渠道链接"></el-table-column>
                <el-table-column prop="createtime" label="添加时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="modifyClick(scope.row.cid)" type="text" size="small">修改</el-button>
                        <el-button type="text" size="small" @click="removeClick(scope.row.cid)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="currPage">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size=pageSize
                    :current-page=currentPage
                    @current-change="handleCurrentChange"
                    :total=total>
                </el-pagination>
            </div>
        </main>
    </div>
</template>
<script>
import channelListModify  from '../modify/channelListModify'
import channelListAdd  from '../add/channelListAdd'
import gDate from '../G_Date/gdate'
import { iframe,addList,ModifyList,RemoteList,DataList,getChannel } from '@/assets/js'
export default {
    components:{
        gDate
    },
    data(){
        return {
            region:'',//下拉选中数据
            options:[],//下拉数据
            currentPage:1,//分页
            tableData:[],
            total:0,
            pageSize:2,
        }
    },
    methods:{
         handleChange:function(e){//触发下拉
            this.region = e
        },
        faithDate:function(e){//时间组件
            this.userDate = e
        },
        search:function(){//搜索
this.currentPage = 1
            this.CurrData(this.region)
        },
        handleCurrentChange:function(e){//点击分页
            this.currentPage = e
            // this.region==''?this.region ='':this.region = this.region;
            this.CurrData(this.region,e)
        },
        modifyClick:function(e){//修改
            let obj = {}
            this.tableData.map((item,index)=>{
                if(item.cid == e){
                    obj.CID = e,
                    obj.channel_name = item.channel_name,
                    obj.channel_url = item.channel_url
                    return obj
                }
            })
            ModifyList(this,obj,channelListModify)
        },
        addBtn:function(e){//新增
            addList(this,channelListAdd)
        },
        removeClick:function(e){//删除
            let data = {
                cid:e
            }
           RemoteList(this,data,e,"channel/delChannel")
        },
        CurrData:function(e,page){
            let data = {
                appid:e,
                page:this.currentPage
            }
            DataList(this,data,'channel/channelList')
        },
        iframe:function(content,elname,size,title){
            this.$layer.iframe({
                content: {
                    content: content, //传递的组件对象
                    parent: this,//当前的vue对象
                    data:elname
                },
                area:size,
                title:title
            });
        }
    },
    mounted:function(){
        this.CurrData()
        getChannel(this)
    }
}
</script>